<template>
  <view>
  <uni-file-picker
      v-if="operateType!=='view'"
      v-model="files"
      fileMediatype="image"
      mode="grid"
      @select="select"
      @progress="progress"
      @success="success"
      @fail="fail"
      @delete="deleteFile"
      :title="title"
      :del-icon="operateType!=='view'"
      :disabled="operateType==='view'"
  />
    <view v-if="operateType==='view'">
      <uni-grid  :column="3" :highlight="false" >
        <uni-grid-item v-for="(item, index) in files" :index="index" :key="index">
            <image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>

import UniDataPicker from "../../uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker";
import {attachmentService} from "../../api/attachmentService";
import {BASE_IMG_URL} from "../../api/service";

export default {
  name: "FileUpload",
  components: {UniDataPicker},
  props: ["associateFormId", "associateFormName","title","operateType"],
  data() {
    return {
      // imageValue: [],
      files: [],
    }
  },
  created(){
    // if(this.operateType === "view"){
    //   this.init();
    // }
  },
  watch:{
    associateFormId: {
      immediate: true,    // 这句重要
      handler (val) {
        if(this.operateType === "view"){
          this.init();
        }
        // console.log(val)
      }
    }
  },
  methods: {
    // 获取上传状态
    select(e) {
      console.log('选择文件：', e)
      e.tempFiles.forEach(file=>{
        this.files.push(file)
      })
      this.$emit("change",this.files)
      // console.log(this.files)

    },
    init(){
      // console.log(this.associateFormId,this.associateFormName)
      attachmentService.findFile(this.associateFormId,this.associateFormName).then(res=>{
        console.log(res)
        let files=[];
        if(res.data){
          res.data.forEach(item=>{
            files.push(
                {
                  "name":item.attachmentRealName,
                  "extname":item.attachmentRealName.substr(item.attachmentRealName.indexOf("."),item.attachmentRealName.length),
                  "url":BASE_IMG_URL+item.attachmentAddr
                })
          })
        }
        this.files=files;
        // console.log("files",files)
      })
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },

    // 上传成功
    success(e) {
      console.log('上传成功')
    },

    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    },
    prviewImage(img, index) {
      let urls = []
      this.files.forEach(i => {
        urls.push(i.url)
      })
      uni.previewImage({
        urls: urls,
        current: index
      });
    },
    deleteFile(e){
      var index0 = this.files.findIndex(item => {
        if (item.uuid == e.tempFile.uuid) {
          return true
        }
      })
      this.files.splice(index0, 1)
      this.$emit("change",this.files)
    }
  }

}
</script>

<style scoped>
.file-image {
  width: 100%;
  height: 100%;
}
</style>